<template>
	<div class="tree-root">
		<TreeNode :node="root"/>
	</div>
</template>
<script>
	import TreeNode from './components/tree-node.vue';
	import NodeService from './service/node.service.js';
	export default {
		name: 'TreeRoot',
		
		components: {
			TreeNode

		},

		data: function(){
			return {
				root: {
					id: 0,
					type: 0,
					name: 'root',
					value: 'root',
					childNodes: [],
					childOpen: false,
				}
			};

		},

		methods: {
			setupTreeRoot: function(){
				let self = this;
				let domRef = self.domRef;
				let snapshotMap = domRef.getSnapshotMap();
				let treeRoot = NodeService.buildTree(snapshotMap);
				self.$set(self, 'root', treeRoot);
			
			},

			setupDeltaUpdate: function(deltaMap){
				let self = this;

			},

		},
		
		mounted: function(){
			let self = this;
			self.domRef = self.$root.serviceRefs.domRef;
			self.setupTreeRoot();

		},

		created: function(){
			let self = this;
			self.$bus.$on('dom-update', (deltaMap) => self.setupDeltaUpdate(deltaMap));

		}

	}
</script>
<style>
	.tree-root{
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
	}
</style>